/*
 * @Author: jiu yin
 * @Date: 2024-05-09 17:58:28
 * @LastEditTime: 2024-06-19 20:40:22
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\component\AddModal.tsx
 * jiu
 */
import { useState, useRef } from "react";

import Modal_edit from "@/comment/modal_edit";
import { ProTable, ProFormText } from "@ant-design/pro-components";
import type { ActionType } from "@ant-design/pro-components";
import { ConfigProvider, message, Input, Modal } from "antd";
import User_avatar from "@/comment/user_avatar";
import { check_devices_info, add_devices } from "@/api/home";
import pico from "@/assets/image/pico.png";

export default function AddModal(props: any) {
	let { isModalOpen, query_list } = props;
	const actionRef = useRef<ActionType>(null);
	const [checkbox_value, set_checkbox_value] = useState([] as any);
	const dataRef = useRef([] as any);

	const handleOk = () => {
		if (!checkbox_value.length) return message.error("请选择设备");
		console.log(checkbox_value);
		let check_arr = dataRef.current.filter((item: any, index: number) => checkbox_value.includes(index + 1));
		console.log(check_arr);
		request_add_devices(check_arr);
	};
	//通知父级
	const inform = () => {
		message.success("添加成功");
		isModalOpen[1](false);
		props.reload();
	};
	//添加请求
	const request_add_devices = (check_arr: any) => {
		add_devices({ device_sn: check_arr.map((item: any) => item.device_sn) }).then((res: any) => {
			if (res.code == 200) {
				inform();
			} else if (res.code == 408) {
				Modal_error(check_arr, res.data);
			}
		});
	};
	//设备报错 做差集 去除不能选的
	const Modal_error = (check_arr: any, err_arr = [529]) => {
		Modal.error({
			title: "提示",
			content: (
				<div>
					<p>以下设备未经系统授权无法添加</p>
					<p>请移除此设备或联系您的供应商处理</p>
					<ul>
						{err_arr.map((item: any, index: number) => (
							<li key={index}>设备SN： {item}</li>
						))}
					</ul>
				</div>
			),
			onOk: () => {
				let two_check_arr = check_arr.filter((item: any) => err_arr.every(device_sn => device_sn != item.device_sn));
				let two_index = [] as any;
				dataRef.current.forEach((item: any, index: number) => {
					if (two_check_arr.some((i: any) => i.device_sn == item.device_sn)) {
						two_index.push(index + 1);
					}
				});
				console.log(two_index);
				set_checkbox_value(two_index);
			},
		});
	};

	const columns = [
		{
			dataIndex: "index",
			valueType: "indexBorder",
			width: 48,
		},
		{
			title: "设备信息",
			dataIndex: "device_name",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div className="flex">
					<img src={pico} alt="" className="w-72px h-72px mr-10px" />

					<div>
						<Input
							style={{ width: 200, height: 35, color: "#1677ff" }}
							placeholder="设备名称"
							allowClear
							defaultValue={item.device_name}
							onChange={e => {
								let value = e.target.value;
								let itemIndex = dataRef.current.findIndex((i: any) => i.device_sn == item.device_sn);
								dataRef.current[itemIndex].name = value;
								console.log(dataRef.current);
							}}></Input>
						<p className="c-#5B5B5B text-12px mt-10px ml-5px">SN：{item.device_real_sn}</p>
					</div>
				</div>
			),
		},
		{
			title: "托管用户",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div className="mt-10px ml-10px">
					{item.host_status == 1 && <p className="mt-15px">待托管</p>}

					{item.host_status == 2 && <p className="mt-15px">自有</p>}

					{item.host_status == 3 && (
						<User_avatar
							options={{
								avatar_url: item.avatar_url,
								nickname: item.nickname,
								// sex: 1,
								id: item.user_id,
								color: "#A6A6A6",
							}}
						/>
					)}
				</div>
			),
		},
	];

	return (
		<Modal_edit title="添加设备" width={800} isModalOpen={isModalOpen} handleOk={handleOk}>
			<div className="mt-50px">
				<ConfigProvider>
					<ProTable
						columns={columns}
						actionRef={actionRef}
						request={async (params, sort, filter) => {
							let { data } = await check_devices_info({
								page: params.current,
								limit: params.pageSize,
								device_sn: query_list,
								...params,
							});
							data.forEach((item: any, index: number) => (item.key = index + 1));
							dataRef.current = data;
							return {
								data: data,
								success: true,
								total: data.total,
							};
						}}
						rowKey="key"
						rowSelection={{
							type: "checkbox",
							selectedRowKeys: checkbox_value,
							onChange: record => {
								set_checkbox_value(record);
							},
						}}
						tableAlertRender={false}
						search={false}
						options={false}
						pagination={{
							pageSize: 100,
							hideOnSinglePage: true,
						}}
						dateFormatter="string"
					/>
				</ConfigProvider>
			</div>
		</Modal_edit>
	);
}
